<!-- get value from params -->
{{ $folderDir:= .Get "dir" }}
{{ $class:= .Get "class" }}
{{ $height:= replace (replace (.Get "height") "px" "") "x" "" }}
{{ $width:= replace (replace (.Get "width") "px" "") "x" "" }}
{{ $webp:= .Get "webp" | default false }}
{{ $loading:= .Get "loading" | default "lazy" }}
{{ $resize:= .Get "resize" }}
{{ $command:= .Get "command" }}
{{ $option:= .Get "option" }}
{{ $zoomable:= .Get "zoomable" | default true }}

{{ $scratch := newScratch }}
{{ $page:= .Page }}
{{ $assetsImage:= resources.Match (add (string $folderDir) `/*`) }}
{{ $contentImage:= $page.Resources.Match (add (string $folderDir) `/*`) }}
{{ $staticImage:= print "static/" $folderDir }}


<!-- start of slider wrapper -->
<div class="swiper gallery-slider {{ $class }}">
  <div class="swiper-wrapper">
    <!-- start of checking asset-image -->
    {{ if $assetsImage }}
      <!-- start of image range -->
      {{ range $assetsImage }}
        {{ $image := resources.Get . }}
        {{ $imageExt := path.Ext $image }}
        {{ if or (eq $imageExt `.jpg`) (eq $imageExt `.jpeg`) (eq $imageExt `.png`) (eq $imageExt `.webp`) (eq $imageExt `.svg`) (eq $imageExt `.gif`) (eq $imageExt `.ico`) }}

          {{ partial "image-pipe.html" (dict "Context" $scratch "Height" $height "Width" $width "Command" $command "Webp" $webp "Image" $image "Option" $option "Zoomable" $zoomable) }}
          {{ $imageHeight:= $scratch.Get "image-height" }}
          {{ $imageWidth:= $scratch.Get "image-width" }}
          {{ $imagePaths:= split .Name "/" }}
          {{ $imageAlt:= index $imagePaths (sub (len $imagePaths) 1)}}


          <div
            class="swiper-slide {{ if eq $zoomable `true` }}zoomable{{ end }}">
            {{ if eq $zoomable `true` }}
              <a
                href="{{ $image.RelPermalink }}"
                class="glightbox"
                style="display: block;">
                <img
                  loading="{{ $loading }}"
                  src="{{ $scratch.Get `image` }}"
                  class="img"
                  style="margin: 0"
                  alt="{{ $imageAlt }}"
                  onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
              </a>
            {{ else }}
              <img
                loading="{{ $loading }}"
                src="{{ $scratch.Get `image` }}"
                class="img"
                style="margin: 0"
                alt="{{ $imageAlt }}"
                onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
            {{ end }}
          </div>
        {{ end }}
      {{ end }}


      <!-- end of image range -->

      <!-- start of checking content-image -->
    {{ else if $contentImage }}

      <!-- start of image range -->
      {{ range $contentImage }}
        {{ $image:= $page.Resources.GetMatch (printf "*%s*" .) }}
        {{ $imageExt := path.Ext $image }}
        {{ if or (eq $imageExt `.jpg`) (eq $imageExt `.jpeg`) (eq $imageExt `.png`) (eq $imageExt `.webp`) (eq $imageExt `.svg`) (eq $imageExt `.gif`) (eq $imageExt `.ico`) }}

          {{ partial "image-pipe.html" (dict "Context" $scratch "Height" $height "Width" $width "Command" $command "Webp" $webp "Image" $image "Option" $option "Zoomable" $zoomable) }}
          {{ $imageHeight:= $scratch.Get "image-height" }}
          {{ $imageWidth:= $scratch.Get "image-width" }}
          {{ $imagePaths:= split .Name "/" }}
          {{ $imageAlt:= index $imagePaths (sub (len $imagePaths) 1)}}


          <div
            class="swiper-slide {{ if eq $zoomable `true` }}zoomable{{ end }}">
            <div class="gallery-item">
              {{ if eq $zoomable `true` }}
                <a
                  href="{{ $image.RelPermalink }}"
                  class="glightbox"
                  style="display: block;">
                  <img
                    loading="{{ $loading }}"
                    src="{{ $scratch.Get `image` }}"
                    class="img"
                    style="margin: 0"
                    alt="{{ $imageAlt }}"
                    onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
                </a>
              {{ else }}
                <img
                  loading="{{ $loading }}"
                  src="{{ $scratch.Get `image` }}"
                  class="img"
                  style="margin: 0"
                  alt="{{ $imageAlt }}"
                  onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
              {{ end }}
            </div>
          </div>
        {{ end }}
      {{ end }}


      <!-- end of image range -->

      <!-- start of checking static-image -->
    {{ else if os.FileExists $staticImage }}

      {{ range (readDir $staticImage) }}
        {{ if and (ne .Name ".DS_Store") (not .IsDir) }}
          {{ $image := print "/" $folderDir "/" .Name }}
          {{ $imageExt := path.Ext $image }}
          {{ if or (eq $imageExt `.jpg`) (eq $imageExt `.jpeg`) (eq $imageExt `.png`) (eq $imageExt `.webp`) (eq $imageExt `.svg`) (eq $imageExt `.gif`) (eq $imageExt `.ico`) }}
          {{ $imagePaths:= split .Name "/" }}
          {{ $imageAlt:= index $imagePaths (sub (len $imagePaths) 1)}}

            <div
              class="swiper-slide {{ if eq $zoomable `true` }}
                zoomable
              {{ end }}">
              <div class="gallery-item" data-i="{{ .IsDir }}">
                {{ if eq $zoomable `true` }}
                  <a
                    href="{{ $image }}"
                    class="glightbox"
                    style="display: block;">
                    <img
                      loading="{{ $loading }}"
                      src="{{ $image }}"
                      class="img"
                      style="margin: 0"
                      alt="{{ $imageAlt }}"
                      height="{{ $height }}"
                      width="{{ $width }}" />
                  </a>
                {{ else }}
                  <img
                    loading="{{ $loading }}"
                    src="{{ $image }}"
                    class="img"
                    style="margin: 0"
                    alt="{{ $imageAlt }}"
                    height="{{ $height }}"
                    width="{{ $width }}" />
                {{ end }}
              </div>
            </div>
          {{ end }}
        {{ end }}
      {{ end }}

    {{ else }}
      <!-- if directory does not exist -->
      <strong style="display: inline-block; margin-top:15px">
        Nothing to show in [{{ site.BaseURL }}<span style="color:red">
          {{ $folderDir }}
        </span>
        ] or folder does not exist
      </strong>
    {{ end }}
    <!-- end of checking image directory -->
  </div>

  <!-- navigation buttons -->
  <span class="swiper-button-prev"></span>
  <span class="swiper-button-next"></span>
</div>
<!-- end of slider wrapper -->
